<template>
	<Row class="data-dictionary" style="padding:10px;">
		<Row>
			<Form label-position="top">
				<Row>
					<Col span="5" v-if="this.personType === 1 || riskType">
					<FormItem label style="margin-bottom: 14px;">
						<Select v-model="formData.enterpriseId" style="width: 90%;" ref="treeSelect" placeholder="机构" v-if="!riskType">
							<Option v-for="item in list1" :value="item.enterpriseId" :key="item.enterpriseId" style="display: none;">{{ item.title }}</Option>
							<Tree :data="orgList" style="padding:0 10px" @on-select-change="checkEng"></Tree>
						</Select>
						<Input v-else style="width: 90%;" v-model="shortName" placeholder="机构" disabled />
					</FormItem>
					</Col>
				<!-- 	<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.projectId" style="width: 90%;" ref="treeSelectPro" placeholder="项目" v-if="!riskType">
							<Option v-for="item in list2" :value="item.proId" :key="item.proId" style="display: none;">{{ item.title }}</Option>
							<Tree :data="proList" style="padding:0 10px" @on-select-change="checkPro"></Tree>
						</Select>
						<Input v-else style="width: 90%;" v-model="projectName" placeholder="项目" disabled />
					</FormItem>
					</Col> -->
					<Col span="5">
						<FormItem label style="margin-bottom: 14px;">
							<Select  v-if="this.personType != 3" clearable v-model="formData.projectTeamId" style="width: 90%;" placeholder="项目" :disabled="riskType ? true : false">
								<Option v-for="item in proList" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
							</Select>
							<Select  v-if="this.personType == 3"  v-model="formData.projectTeamId" style="width: 90%;" placeholder="项目" :disabled="riskType ? true : false">
								<Option v-for="item in proList" :value="item.id" :key="item.id">{{ item.shortName }}</Option>
							</Select>
						</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Input clearable style="width: 90%;" v-model="formData.constructionPointName" placeholder="工点名称" />
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.isWork" style="width: 90%;" placeholder="是否在施" clearable>
							<Option v-for="item in pointState" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5" v-if="!riskType">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.distRiskGrade" style="width: 90%;" placeholder="工点风险等级">
							<Option v-for="item in riskLevelList" :value="item.id" :key="item.id">{{ item.name }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Select clearable v-model="formData.riskCategoryId" style="width: 90%;" placeholder="作业风险类别">
							<Option v-for="item in riskCategoryList" :value="item.id" :key="item.id">{{ item.riskCategoryName }}</Option>
						</Select>
					</FormItem>
					</Col>
					<Col span="5">
					<FormItem label style="margin-bottom: 14px;">
						<Input clearable style="width: 90%;" v-model="formData.riskName" placeholder="作业风险名称" />
					</FormItem>
					</Col>
					<Col span="5" style="text-align: right;float: right;">
					<div class="button-s">
						<Button type="primary" style="margin-right: 15px" @click="searchBtn">搜索</Button>
						<Button v-if="!riskType" type="primary" @click="exportRiskStatistics()">导出</Button>
					</div>
					</Col>
				</Row>

			</Form>
		</Row>
		<Row>
			<Card style="margin-bottom: 10px;background: rgba(245,248,252,1);border-radius: 4px;" dis-hover>
				<Row>
					<Col span="4" style="margin-top:15px;font-size: 16px;font-weight: 600;">
					动态辨识总数：{{statisticalData.total}}项
					</Col>
					<Col span="20">
					<Row style="">
						<Col span="4">Ⅰ级风险 : {{statisticalData.firstLevel}}项</Col>
						<Col span="4">Ⅱ级风险 : {{statisticalData.secondLevel}}项</Col>
						<Col span="4">Ⅲ级风险 : {{statisticalData.thirdLevel}}项</Col>
						<Col span="4">Ⅳ级风险 : {{statisticalData.fourthLevel}}项</Col>
					</Row>
					<Row style="margin-top:10px;">
						<Col span="4" v-for="(item,index) in statisticalData.riskInfo" :key="index">
              <span v-if="item.name.length>4" :title="item.name" style="cursor: pointer;">{{item.name.slice(0,4)}}...</span>
              <span v-if="item.name.length<=4">{{item.name}}</span>
              : {{item.count}}项
            </Col>
					</Row>
					</Col>
				</Row>
			</Card>
		</Row>

		<Tabs value="1" @on-click="tabpaneBtn">
			<TabPane :label="label" name="1">
				<Table border :columns="columns" :data="dictList" @on-selection-change="selectRowTable">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '动态辨识详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label1" name="2">
				<Table border ref="selection" :columns="columns" :data="dictList" @on-selection-change="selectRowTable">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '动态辨识详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label2" name="3">
				<Table border ref="selection" :columns="columns" :data="dictList" @on-selection-change="selectRowTable">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '动态辨识详情')">详情</span>
					</template>
				</Table>
			</TabPane>
			<TabPane :label="label3" name="4">
				<Table border ref="selection" :columns="columns" :data="dictList" @on-selection-change="selectRowTable">
					<template slot-scope="{ row, index }" slot="action">
						<span title="详情" class="button-class" type="text" @click="addBtn('details', row.id, '动态辨识详情')">详情</span>
					</template>
				</Table>
			</TabPane>
		</Tabs>
		<div class="page-div">
		<Page v-show="page.total>0" class="tab-page" :page-size-opts='[10,20,50,100]' :total="page.total" :current="page.current" :page-size="page.pageSize"
		 @on-change="pageChange" @on-page-size-change="sizeChange" show-elevator show-sizer show-total />
		</div>
		<div style="text-align:center;margin-top:20px;" v-if="riskType">
            <Button type="primary" @click="$emit('ledgerObj',selectTable),$emit('isdynamicLledger',false)">确定</Button>
            <Button style="margin-left: 20px;" @click="$emit('isdynamicLledger',false)">取消</Button>
        </div>
	</Row>
</template>

<script>
import { constants } from 'buffer'
	export default {
		props:['riskType','projectId','jgId'],
		name: 'dynamic-identification-ledger',
		data() {
			return {
				shortName:'',
				projectName:'',
				selectTable:[],
				userDetail: JSON.parse(localStorage.getItem('userList')),
				personType: JSON.parse(localStorage.getItem('personType')),
				orgList: [], //机构树
				proList: [], //项目部树
				dictList: [],
				riskCategoryList: [],
				list1: [],
				list2: [],
				formData: {
					enterpriseId: '',
					projectTeamId: '',
					constructionPointName: '',
					isWork: 0,
					riskLevel: 1,
					riskName: '',
					distRiskGrade: 0,
				},
				riskLevelList: [
					{
						id: '1',
						name: 'Ⅰ级'
					},
					{
						id: '2',
						name: 'Ⅱ级'
					},
					{
						id: '3',
						name: 'Ⅲ级'
					},
					{
						id: '4',
						name: 'Ⅳ级'
					}
				],
				pointState: [
					{
						id: 1,
						name: '是'
					},
					{
						id: 2,
						name: '否'
					},
				],
				statisticalData: {
					firstLevel: 0,
					fourthLevel: 0,
					riskInfo: [],
					secondLevel: 0,
					thirdLevel: 0,
					total: 0
				},
				parentId: '0',
				uploadList: [],
				columns: [
					{
						type: 'selection',
						align: 'center',
					},
					{
						title: '序号',
						align: 'center',
						width: 70,
						render: (h, params) => {
							return h('span', params.index + (this.page.current - 1) * this.page.pageSize + 1)
						}
					},
					{
						title: '公司名称',
						key: 'enterpriseName',
						align: 'center',
						tooltip:true
					},
					{
						title: '项目名称',
						key: 'projectName',
						align: 'center',
						tooltip:true
					},
					{
						title: '工点名称',
						key: 'constructionPointName',
						align: 'center',
						tooltip:true
					},
					{
						title: '是否在施',
						key: 'isWork',
						width: 100,
						align: 'center'
					},
					{
						title: '工点风险等级',
						key: 'distRiskGrade',
						width: 130,
						align: 'center'
					},
					{
						title: '作业风险类别',
						key: 'riskCategoryNames',
						align: 'center',
						tooltip:true
					},
					{
						title: '作业风险名称',
						key: 'riskName',
						align: 'center',
						tooltip:true
					},
					{
						title: '操作',
						width: 70,
						align: 'center',
						slot: 'action'
					}
				],
				page: {
					total: 0,
					current: 1,
					pageSize: 10,
					totalPage: 0
				},
				label: h => {
					return h('div', [
						h(
							'span', {
								style: {
									color: '#EF3E43'
								}
							},
							'Ⅰ级风险'
						)
					])
				},
				label1: h => {
					return h(
						'span', {
							style: {
								color: '#F86A30'
							}
						},
						'Ⅱ级风险'
					)
				},
				label2: h => {
					return h(
						'span', {
							style: {
								color: '#F3CF34'
							}
						},
						'Ⅲ级风险'
					)
				},
				label3: h => {
					return h(
						'span', {
							style: {
								color: '#3D6FC9'
							}
						},
						'Ⅳ级风险'
					)
				}
			}
		},
		methods: {
			// table单选
			selectRowTable(selection){
				this.selectTable = selection
			},
			// 父组件给子组件赋值
			parentSetData(){
				this.formData.projectTeamId = this.projectId
				// this.enterpriseDetail(this.jgId)
				if(this.riskType){
					this.shortName = this.userDetail.enterpriseName
					if(this.userDetail.userInOrgType == 'PROJECT_TEAM_USER'){
						this.formData.enterpriseId = this.userDetail.projectTeamId
					}else if(this.userDetail.userInOrgType == 'ROOT_ENTERPRISE_USER'){
						this.formData.enterpriseId = this.userDetail.rootEnterpriseId
					}else{
						this.formData.enterpriseId = this.userDetail.enterpriseId
					}
				}
				let jgId = this.userDetail.enterpriseId
				if(this.columns.length == 8){
					this.columns.pop()
				}
				this.getProTree(jgId)
				this.getWbsTabelList()
				this.getStatistics()
			},
			tabpaneBtn(e) {
				this.page.current = 1;
				this.page.currentPage = 10;
				this.formData.riskLevel = e;
				this.getWbsTabelList();
			},
			//搜索
			searchBtn() {
				this.page.current = 1;
				this.page.currentPage = 10;
				this.getWbsTabelList();
				this.getStatistics();
			},
			//机构树
			getOrgTree() {
				this.orgList = [];
				this.list1 = [];
				this.$api.measurePlan.getOrgTree().then((res) => {
					if (res.code == 200) {
						this.orgList = res.data;
						this.checkEng(this.orgList);
// 						this.getWbsTabelList();
// 						this.getStatistics();
					} else {
						this.$Message.error(res.data.msg);
					}
				})
			},
			//点击机构树
			checkEng(data) {
				if(data.length > 0) {
					this.formData.projectTeamId = '';
					this.list1 = []
					let title = data[0].title
					if(this.$route.query.orgId){
						let enterpriseId = this.$route.query.orgId
						this.list1.push({
							title,
							enterpriseId
						})
						this.getProTree(data[0]);
						this.formData.enterpriseId = enterpriseId
						this.$refs.treeSelect.visible = false
					}else if(data[0].objectId) {
						let enterpriseId = data[0].objectId
						this.list1.push({
							title,
							enterpriseId
						})
						this.getProTree(data[0]);
						this.formData.enterpriseId = enterpriseId
						this.$refs.treeSelect.visible = false
					} else {
						this.$Message.warning('请选择' + title + '下的子集')
					}
				}

			},
			//获取项目
			getProTree(data) {
				// this.proList = [];
				if(!this.riskType){
					this.formData.projectTeamId = '';
				}
// 				if(this.personType === 1 || this.personType === 2) {
// 					this.proList = [{
// 						id: '-1',
// 						shortName: '全部项目',
// 					}];
// 				}
				let id = ''
				if(this.riskType){
					id = data
				}else{
					id = data.objectId
				}
				this.$api.measurePlan.getProList(id).then(res => {
					if(res.code === 200) {
						if(res.data.length > 0) {
							this.proList = res.data
							// res.data.forEach(item => {
							// 	this.proList.push(item);
							// });
							if(!this.riskType && this.personType === 3){
								this.formData.projectTeamId = this.proList[0].id;
							}
							if(this.$route.query.projectId){
								this.formData.projectTeamId = this.$route.query.projectId;
							}
							this.getWbsTabelList();
							this.getStatistics();
						}
					} else {
						this.$Message.error(res.message)
					}
				})
			},
			// checkPro(data) { //点击项目树
			// 	if (data.length > 0) {
			// 		this.list2 = []
			// 		let proId = data[0].id
			// 		let title = data[0].shortName
			// 		this.list2.push({
			// 			proId,
			// 			title
			// 		})
			// 		this.formData.projectId = proId
			// 		this.$refs.treeSelectPro.visible = false
			// 	}
			// },
			//风险类别
			getRiskCategoryFindAll() {
				this.$api.measuresLibrary.getRiskCategoryFindAll().then(res => {
					if (res.code == 200) {
						this.riskCategoryList = res.data
					} else {
						this.$Message.error(res.message)
					}
				})
			},

			//列表
			getWbsTabelList() {
				this.dictList = [];
				this.page.total = 0;
				this.page.totalPage = 0;
				let param = {
					currentPage: this.page.current,
					pageSize: this.page.pageSize,
					whereMap: {
						"enterpriseId": this.formData.enterpriseId,
						"projectId": this.formData.projectTeamId || "", //"项目id",
						"riskLevel": parseInt(this.formData.riskLevel || 0), //风险等级
						"constructionPointName": this.formData.constructionPointName, //"工点名称",
						"isWork": parseInt(this.formData.isWork || 0), //"工点状态",
						"distRiskGrade": parseInt(this.formData.distRiskGrade || 0), //"工点风险等级",
						"riskCategoryId": this.formData.riskCategoryId, //"风险类别id",
						"riskName": this.formData.riskName, //"风险名称",
						"type": 2, //"1:总体，2:动态"
						"source":1,	// 1台账，2每月动态
					}
				};
				if(this.riskType){
					param.whereMap.source = 2
				}else{
					param.whereMap.source = 1
				}
				this.$api.ledgerQuery.getRiskOrderOriginList(param).then(res => {
					if (res.code === 200) {
						this.dictList = res.data.resultObject;
						this.page.total = res.data.totalRecord;
						this.page.totalPage = res.data.totalPage
					} else {
						this.$Message.warning(res.message)
					}
				})
			},

			//台账统计
			getStatistics() {
				let param = {
					"enterpriseId": this.formData.enterpriseId,
					"projectId": this.formData.projectTeamId || "", //"项目id",
					"constructionPointName": this.formData.constructionPointName, //"工点名称",
					"isWork": parseInt(this.formData.isWork || 0), //"工点状态",
					"riskCategoryId": this.formData.riskCategoryId, //"风险类别id",
					"distRiskGrade": parseInt(this.formData.distRiskGrade || 0), //"工点风险等级",
					"riskName": this.formData.riskName, //"风险名称",
					"type": 2, //"1:总体，2:动态"
					"source":1,	// 1台账，2每月动态
				};
				if(this.riskType){
					param.source = 2
				}else{
					param.source = 1
				}
				this.$api.ledgerQuery.getRiskStatistics(param).then(res => {
					if (res.code === 200) {
						this.statisticalData = res.data;
					} else {
						this.$Message.warning(res.message)
					}
				})
			},
			pageChange(current) {
				this.page.current = current
				this.getWbsTabelList(this.parentId)
			},
			sizeChange(size) {
				this.page.pageSize = size
				this.getWbsTabelList(this.parentId)
			},
			exportRiskStatistics() {
				let param = {
					"enterpriseId": this.formData.enterpriseId,
					"projectId": this.formData.projectTeamId || "", //"项目id",
					"constructionPointName": this.formData.constructionPointName, //"工点名称",
					"isWork": parseInt(this.formData.isWork || 0), //"工点状态",
					"riskCategoryId": this.formData.riskCategoryId, //"风险类别id",
					"distRiskGrade": parseInt(this.formData.distRiskGrade || 0), //"工点风险等级",
					"riskName": this.formData.riskName, //"风险名称",
					"type": 2, //"1:总体，2:动态"
				};
				let title = this.userDetail.projectTeamName || this.userDetail.enterpriseName;
				if(this.list1.length > 0 &&  this.list1[0].title){
					title = this.list1[0].title;
				}
				this.$api.ledgerQuery.exportRiskStatistics(param).then((data, status, headers, config) => {
					let blob = new Blob([data], {
						type: "application/vnd.ms-excel"
					});
					if('msSaveOrOpenBlob' in navigator){
						window.navigator.msSaveOrOpenBlob(blob,  title + "动态辨识台账.xlsx");
						return;
					}
					if ('download' in document.createElement('a')) {
						let objectUrl = URL.createObjectURL(blob);
						let a = document.createElement('a');
						document.body.appendChild(a);
						a.setAttribute('style', 'display:none');
						a.setAttribute('href', objectUrl);
						a.setAttribute('download', title + "动态辨识台账.xlsx");
						a.click();
						URL.revokeObjectURL(objectUrl);
					} else {
						navigator.msSaveBlob(blob,title + "动态辨识台账.xlsx");
					}
				}, (err) => {});
			},

			addBtn(type, id, name) {
				this.$router.push({
					path: `general-identification-ledger/${type}/${id}/${name}/2`,
				})
			},
			// 获取机构详情
			enterpriseDetail(id){
				this.$api.companyOrganization.enterpriseDetail(id).then(resp=>{
					if(resp.code == 200){
						this.formData.enterpriseId = resp.data.parentId
						this.shortName = resp.data.shortName
					}
				})
			}
		},
		mounted() {
			// 			this.getWbsTabelList();
			// 			this.getStatistics();
			this.getRiskCategoryFindAll();
			//			this.getOrgTree();
			if(!this.riskType){
				this.columns.splice(0,1)
			}
			//1集团 2工程公司 3项目部
			if(this.personType === 3) {
				this.columns.splice(1,2);
				this.getProTree({
					objectId: this.userDetail.projectTeamId
				})
				console.log(this.userDetail)
				this.formData.enterpriseId = this.userDetail.projectTeamId
			} else if(this.personType === 1) {
				this.getOrgTree();
			} else if(this.personType === 2) {
				this.columns.splice(1,1);
				this.formData.enterpriseId = this.userDetail.enterpriseId;
				this.getProTree({
					objectId: this.userDetail.enterpriseId
				})
			}


		},
		activated() {
// 			this.getWbsTabelList();
// 			this.getStatistics();
		}
	}
</script>

<style lang="scss" scoped>
	.data-dictionary {
		height: calc(100% - 0px);

		.col-height100 {
			height: 100%;
			border-right: 1px solid #ebeef1;
			overflow: auto;

			p {
				padding: 10px;
			}
		}

		.tabs_box {
			color: #f00 !important;
		}
	}
</style>
